<template>
  <el-card class="box-card" style="overflow:auto">
    <div slot="header" class="clearfix">
      <el-button v-if="agent.agentTypeId !== 1" icon="el-icon-arrow-left" style="float: left;" type="primary" v-on:click="return_">返回</el-button>
    </div>
    <el-divider content-position="left" class="detail_title">基础信息</el-divider>
    <el-card v-if="isRoot==1" class="box-card">
      <div class="app_info"><a>应用名称&#8197 ： {{ this.app.appName }}</a></div>
      <div class="app_info"><b>appID &#8197: {{ this.app.appId }}</b></div>
      <div class="app_info"><b>appSecret&#8197 : {{ this.app.appSecret }}</b></div>
    </el-card>
    <el-card v-else class="box-card">
      <div class="app_info"><a>应用名称&#8197 ： {{ this.app.appName }}</a></div>
    </el-card>
    <!--app管理员信息-->
    <div v-if="isRoot==1" class="box-user">
      <el-divider content-position="left" class="detail_title">管理员信息</el-divider>
      <el-card class="box-card">
        <div class="app_info"><a>昵称 : {{ app.app_admin.agentName }}</a></div>
        <div class="app_info"><a>用户名： {{ app.app_admin.agentOpenid }}</a></div>
        <div class="app_info" v-if="app.app_admin.agentEmail !== null"><a>Email :
          {{ this.app.app_admin.agentEmail }}</a></div>
        <div class="app_info" v-else><a>Email : 暂未绑定</a></div>
        <el-button type="danger" v-on:click="resetPSW(app.app_admin.agentOpenid)">重置密码</el-button>
      </el-card>
    </div>
    <!--用户账号信息-->
    <div v-else class="box-user">
      <el-divider content-position="left" class="detail_title">账号信息</el-divider>
      <el-card class="box-card">
        <div v-if="account===null">
          <div>暂未绑定账号，请先绑定该App账号</div>
          <el-button v-on:click="binding(app.appId)">点击这里绑定账号</el-button>
        </div>
        <div v-else>
          <div class="app_info"><a>昵称 : {{ account.accountName }}</a></div>
          <div class="app_info"><a>账号 : {{ account.accountId }}</a></div>
          <div class="app_info" v-if="account.accountHomepage !== null"><a>主页地址 :
            {{ this.account.accountHomepage }}</a></div>
          <div class="app_info" v-else><a>主页地址 : 暂无</a></div>
        </div>
      </el-card>
    </div>
    <div class="box-user">
      <el-divider content-position="left" class="detail_title">群组信息</el-divider>
      <el-card class="box-card">
        <el-table :data="group_table" stripe style="width: 100%">
          <el-table-column prop="groupName" label="群组名称" width="180">
          </el-table-column>
          <el-table-column prop="count" label="群组总人数" width="180">
          </el-table-column>
          <el-table-column v-if="isRoot===1" prop="" label="">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleView(scope.$index, scope.row)">查看详情</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column v-else prop="" label="">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleView(scope.$index, scope.row)">查看详情</el-button>
              <el-button  v-if="scope.row.groupId!==account.groupId" size="mini" @click="joinGroup(scope.$index, scope.row)" style="width: 15%;">加入</el-button>
              <el-button v-else size="mini" type="success" disabled style="width: 15%;">已加入</el-button>
            </template>
          </el-table-column>
          <el-table-column
            align="right">
            <template slot="header" slot-scope="scope">
              <el-button v-if="isRoot==1" size="mini" @click="addGroup">添加</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

  </el-card>

</template>
<script>

  import AddGroupForm from "../message/AddGroupsForm";
  import BindingApp from "../message/BindingApp";

  export default {
    mounted: function () {
      this.getApp();
    },
    data() {
      return {
        app: {
          app_admin: {},
          entity12Groups: [{
            count: ''
          }]
        },
        account: null,
        agent: JSON.parse(localStorage.getItem("agent")),
        group_item: {
          name: '',
          count: '',
          group_id: ''
        },
        group_table: [],
        isRoot: 0,
      }
    },
    components: {
      "v-form": AddGroupForm,
      "binding-form": BindingApp
    },
    methods: {
      getApp() {
        let that = this
        if (that.agent.agentTypeId === 0) {
          this.isRoot = 1
        }
        let url = "/api/app/show/" + this.$route.query.id
        this.$axios.get(url).then(successResponse => {

          that.app = successResponse.data

          for (var i = 0; i < that.app.entity12Groups.length; i++) {
            var item = that.app.entity12Groups[i];
            item.count = item.entity11Accounts.length;
            that.group_table.push(item)
          }
        }).catch(failResponse => {
        })

        if(this.isRoot===0){
          this.getAccount()
        }
      },
      getAccount() {
        let url = "/api/account/find/" + this.$route.query.id
        this.$axios.get(url).then(successResponse => {
          if (successResponse.data !== null) {

            this.account = successResponse.data
            console.log(this.account)
          }
        }).catch(failResponse => {
        })
      },
      handleView(index, row) {
        console.log(index, row);
        this.$router.push({path: '/group/details', query: {id: row.groupId}})
      },
      handleDelete(index, row) {
        console.log(index, row);

      },
      joinGroup(index, row) {
        let url = "/api/account/group/join"
        this.$axios.get(url, {params: {groupOpenid: row.groupId}}).then(successResponse => {
          location.reload()
        }).catch(failResponse => {
        })
      },
      binding(appId) {
        this.$msgbox({
          message: <binding-form ref="BindingApp"></binding-form>,
          showCancelButton: true,
          confirmButtonText: '绑定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 30);
              }, 300);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$refs.BindingApp.binding(appId)
          location.reload()
        }).catch(msg => {
          if (msg == "cancel") {
            this.$refs.BindingApp.resetForm()
            this.$message.info("已取消")
          } else {
            this.$message.error(msg)
          }
        });
      },
      addGroup() {
        this.$msgbox({
          message: <v-form ref="AddGroupForm"></v-form>,
          showCancelButton: true,
          confirmButtonText: '添加',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 30);
              }, 300);
            } else {
              done();
            }
          }
        }).then(action => {

          this.$refs.AddGroupForm.submitGroupForm(this.$route.query.id)
          location.reload()
        }).catch(msg => {
          if (msg == "cancel") {
            this.$refs.AddGroupForm.resetAddGroupForm()
            this.$message.info("已取消")
          } else {
            this.$message.error(msg)
          }
        });
      },
      resetPSW(agentOpenid){
        let that=this
        let url="/api/agent/reset/psw/"+agentOpenid
        this.$axios.get(url).then(successResponse =>{this.$message.info("密码重置成功")}).catch(failResponse =>{})
      },
      return_(){
        this.$router.go(-1);
      }
    }
  }
</script>
<style>
  .box-card {
    width: 100%;
    height: 100%;
  }

  .detail_title {
    margin-top: 2%;
  }

  .app_info {
    border: 20px;
    text-align: left;
    margin-top: 2%;
    padding-left: 5%;
    color: #2c3e50;
  }

  .box-user {
    margin-top: 5%;
    width: 100%;
    height: 100%;
  }
</style>
